{% extends "base.html" %}
{% block content %}
{% ifequal is_con 0 %}
<script type="text/javascript" src="/static/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/static/js/jquery-ui-1.8.16.custom.min.js"></script>
<link href="/static/css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<div class="form-div" style="margin:10px;">
  <form action='' method='get' name="searchForm">
	<table>
		<tr>
			<td style="border:0px;padding:3px;">
				<img src="/static/images/icon_search.gif" width="26" height="22" border="0" alt="SEARCH">
			</td>
			<td  style="border:0px;padding:3px;">
				Date Start:<input type='text' name='starttime' id='start'>
				Date End:<input type='text' name='endtime' id='end'>
				Program:<select name="p_id" id="p_id" style="color:#CC33FF" onchange='$("#stu_name").attr("name","");$("input#search").click()'>
							{% for p in project_list %}
								<option value="{{p.id}}" {% ifequal p.id p_id %} selected="selected" {% endifequal %}>{{p.name}}</option>
							{% endfor %}
							</select>
							<select name="stu_name_id" id="stu_name" style="color:#CC33FF" onchange='$("input#search").click()'>
							</select>
							<select name="" id="descript" style="color:#CC33FF" onchange='$("input#search").click()'>
								<option value="datefee">Application Fee</option>
								<option value="datereg">Registration Fee</option>
								<option value="amount">Tuition Fee</option>
								<option value="date1">1st Installment</option>
								<option value="date2">2st Installment</option>
								<option value="date3">3st Installment</option>
								<option value="date4">4st Installment</option>
							</select>
				<input type='button' id="search" value='Search'/>
			</td>
		</tr>
		<tr style="display:none;">
			<td style="border:0px;padding:3px;"></td>
			<td colspan='10' style="border:0px;padding:3px;">
				<div class="selectdate" days='7'>Weekly</div>
				<div class="selectdate" days='14'>Bi-weekly</div>
				<div class="selectdate" days='30'>Monthly</div>
				<div class="selectdate" days='90'>Season</div>
				<div class="selectdate" days='180'>Half-yearly</div>
				<div class="selectdate" days='365'>Yearly</div>
			</td>
		</tr>
	</table>
  </form>
</div>
<script type="text/javascript" src="/static/js/create_report_export.js"></script>
<script>
$(document).ready(
	function(){
    	$('#start').datepicker({"dateFormat": "yy-mm-dd",changeMonth:true,changeYear:true})
		$('#end').datepicker({"dateFormat": "yy-mm-dd",changeMonth:true,changeYear:true})
		var agodays = new Date();
		var year = agodays.getUTCFullYear()
		var month = (agodays.getUTCMonth()+1)>=10?(agodays.getUTCMonth()+1):'0'+(agodays.getUTCMonth()+1)
		var day = agodays.getUTCDate()>=10?agodays.getUTCDate():'0'+agodays.getUTCDate()
		var date = year+'-'+month+'-'+day
		$('#start').val(date)

		$('div.selectdate').click(function(){
			$('div.selectdate').css('background','')
			$(this).css('background','#defdef')
			var days = parseInt($(this).attr('days'))
			var agodays = new Date(Date.parse(new Date().toString()) - 86400000*days);

			var year = agodays.getUTCFullYear()
			var month = (agodays.getUTCMonth()+1)>=10?(agodays.getUTCMonth()+1):'0'+(agodays.getUTCMonth()+1)
			var day = agodays.getUTCDate()>=10?agodays.getUTCDate():'0'+agodays.getUTCDate()
			var date = year+'-'+month+'-'+day
			$('#start').val(date)
			$('#end').val('')
			$("input#search").click()
		})
	}
)
$("input#search").bind({
	click:function(){
		var t = this
		if(t.style.cursor == 'wait'){
			return false;
		}
		t.style.cursor = 'wait'
		var data = $('form[name="searchForm"]').serializeArray()
		var datas = {'is_con':1,'t':Math.random()}
		for(var i=0;i<data.length;i++){
			datas[data[i].name] = data[i].value
		}
		$.ajax({
			url:'',
			data:datas,
			type:'get',
			dataType:'html',
			success:function(e){
				t.style.cursor = 'pointer'
				$('#conreturn').html(e)
			}
		})
	}
})
</script>
{% endifequal %}
<style>
td{
	padding:2px;
	border:1px dotted #333;
}
th{
	background:yellow;
	border:1px dotted #333;
	padding:2px;
	line-height:30px;
}
.selectdate{
	width:auto;float:left;padding:3px;background:#fff;border:1px dotted #333;margin:2px;cursor:pointer;
}
.selectdate:hover{
	background:#defdef;
}
.gray{
	color:gray;
}
</style>
{{error_info}}
<div id="conreturn" style="margin:10px;">
	<table width='600px'>
		<tr>
			<td colspan='1' style="line-height:40px;font-size:16px;" align='center'><strong id='report_title'>Official Receipt</strong></td>
		</tr>
		{%if stu_names%}
		<tr>
			<td>
			<table width='100%'>
				<tr>
					<th width="100px" align='left'>Student Name:</th>
					<td id='fullname' colspan='3'></td>
				</tr>
				<tr>
					<th width="100px" align='left'>Invoice No.</th>
					<td id="report_start" colspan='3'>{{today|date:'Ymd'}}{{p_id}}{{stu_name_id}}{{random}}</td>
				</tr>
				<tr>
					<th width="100px" align='left'>Invoice Date:</th>
					<td colspan='3'>{{today|date:'M d,Y'}}</td>
				</tr>
				<tr>
					<th width="100px" align='left'>Program:</th>
					<td id='program_name' colspan='3'></td>	
				</tr>
				<tr height='30'>
					<td colspan='4'></td>
				<tr>
			</table>
			</td>
		</tr>
		<tr>
			<td>
				<table width="100%">
				<tr>
					<th width="350px">Descriptions</th>
					<th colspan='3'>Amount</th>
				<tr>
				<tr>
					<td valign="middle" style="line-height:25px;"><b id="description"></b></td>
					<td colspan='3'>
						{%ifequal amount 'amount'%}
							{{money_ret.4}}&nbsp;{%if money_ret.5%}{{money_ret.5}}{%else%}0{%endif%}
						{%else%}
							{{money_ret.0}}&nbsp;{%if money_ret.1%}{{money_ret.1}}{%else%}0{%endif%}
						{%endifequal%}
					</td>
				<tr>
				<tr>
					<td valign="middle" style="line-height:25px;"><b>Paid By</b></td>
					<td colspan='3'>
						{{money_ret.2}}
					</td>
				<tr>
				<tr>
					<td valign="middle" style="line-height:25px;"><b>Received By</b></td>
					<td colspan='3'>
						{%ifequal amount 'amount'%}
							
						{%else%}
							{{money_ret.3}}
						{%endifequal%}
					</td>
				<tr>
			</td>
		</tr>
		{%else%}
		<tr><td colspan='10' align='center'><span style="color:green;font-size:16px;line-height:30px;">No Result!</span></td></tr>
		{%endif%}
	</table>
</div>
{{ttt}}
<script>
var stu_name = ''
{%if stu_names%}
	$('#stu_name').show()
	$('#descript').show()
	$('#descript').attr('name','descript')
	{% for p in stu_names %}
		stu_name += '<option value="{{p.0}}" {%ifequal p.0 stu_name_id%} selected {%endifequal%}>{{p.1}}</option>'
		{%ifequal p.0 stu_name_id%}
			{%if p.1%}
				$('#fullname').html('{{p.1}}')
			{%else%}
				$('#fullname').html('{{p.2}}')
			{%endif%}
		{%endifequal%}
	{% endfor %}
{%else%}
	$('#stu_name').hide()
	$('#descript').hide()
	$('#descript').attr('name','')
{%endif%}
$('#program_name').html($('#p_id option:selected').text())
$('#description').html($('#descript option:selected').text())
$('#stu_name').html(stu_name);
$('#stu_name').attr('name',"stu_name_id")
</script>
{% endblock %}
